// 网易云音乐接口
axios.defaults.baseURL = 'https://autumnfish.cn';
const app = new Vue({
    el: "#player",
    data(){
        return {
            query: "邓丽君",
            musicList: [],
            musicUrl: '',
            imgUrl: '',
            isPlay: false,
            hotComments : [],
            isShow: false,
            mvUrl: '',
            page: 1,
            curMusicId: 0,
        }
    },
    methods: {
        searchMusic: function(){
            let that = this;
            axios.get('/search?keywords=' + this.query)
            .then(function(res){
                
                that.musicList = res.data.result.songs;
            })
        },

        playMusic: function(musicId){
            let that = this;
            that.curMusicId = musicId;
            let dom = this.$refs.commentContainer;
            dom.scrollTop = 0;
            axios.get('/song/url?id=' + musicId)
            .then(function(res){
                that.musicUrl = res.data.data[0].url;
            })
            //获取歌曲封面
            axios.get('/song/detail?ids=' + musicId)
            .then(function(res){
                //console.log(res.data.songs[0].al.picUrl)
                that.imgUrl = res.data.songs[0].al.picUrl;
            })
            .catch(function(err){
                console.log(err);
            })
            //获取歌曲评论
            // axios.get('/comment/hot?type=0&id=' + musicId)
            // .then(function(res){
            //     console.log(res);
            //     that.hotComments = res.data.hotComments;
            // })
            // .catch(function(err){
            //     console.log(err);
            // })
            
            // 写一个滚动加载的方法
            console.log('/comment/new?type=0&sortType=2&id=' + musicId + '&page=' + that.page);
            axios.get('/comment/new?type=0&sortType=2&id=' + musicId + '&pageNo=' + that.page)
            .then(function(res){
                //console.log(res.data.data.comments);
                that.hotComments = res.data.data.comments;
            })

        },

        play: function(){
            this.isPlay = true;
            this.mvUrl = '';
        },

        pause: function(){
            this.isPlay = false;

        },
        playMv: function(mvId){
            if(mvId){
                let that = this;
                that.isShow = true;
                axios.get('/mv/url?id=' + mvId)
                .then(function(res){
                    // console.log(res);
                    that.$refs.audio.pause();
                    that.mvUrl = res.data.data.url;
                })
                .catch(function(err){
                    console.log(err);
                })
            }

        },
        hide: function(){
            this.isShow = false;
            this.$refs.video.pause();
        },

        //写一个滚动加载的方法
        scrollGetComment: function(){
            let dom = this.$refs.commentContainer;
            const that = this;
            console.log(dom);
            //监听滚动容器的滚动事件
            dom.addEventListener('click', function(){
                console.log('click');
            })
            dom.addEventListener('scroll', function(){
                //元素的可视高度
                const clientHeight = dom.clientHeight;
                //滚动条滚动的距离
                const scrollTop = dom.scrollTop;
                //容器的实际高度
                const scrollHeight = dom.scrollHeight;
                if(clientHeight + scrollTop >= scrollHeight){
                    that.page++;
                    console.log('/comment/new?type=0&sortType=2&id=' + that.curMusicId + '&pageNo=' + that.page);
                    axios.get('/comment/new?type=0&sortType=2&id=' + that.curMusicId + '&pageNo=' + that.page)
                    .then(function(res){
                        //console.log(res.data.data.comments);
                        //console.log(res.data.data.comments)
                        that.hotComments = that.hotComments.concat(res.data.data.comments);
                        console.log(that.hotComments);
                    })
                }
          
            }, true)
        }
    },

    mounted(){
        this.scrollGetComment();
        console.log('hhh');
    }
})